<template>
  <div class="hotSearch">
    <div class="title">
      <h3>热搜榜</h3>
      <div class="play">
        <van-icon name="play" @click="Toast('播放不了')" />播放
      </div>
    </div>
    <div class="hot-list">
      <li v-for="item, index in hotList" :key="index" :class="{ 'hot': index < 3 }" @click="search(item.searchWord)">
        <span>{{ index + 1 }}</span>
        <p class="text-overflow-1">
          {{ item.searchWord }}
          <b v-if="index == 0" class="font-hot">热</b>

        </p>
      </li>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getSearchDefault, getSearchHot, getSearchHotDetail } from '@/request/api/musicApi'
import { Toast } from 'vant';
const emit = defineEmits(['onSearch'])
onMounted(() => {
  initData();
})

const initData = () => {
  searchHot()
}

// 热搜列表
let hotList = ref([]);
const searchHot = () => {
  getSearchHotDetail().then(data => {
    hotList.value = data.data
    console.log(data);
  })
}

// 搜索
const search = (keywords) => {
  emit('onSearch', keywords)
}
</script>
  
<style lang='less' scoped>
.hotSearch {
  background-color: #FFF;
  width: 100%;
  margin: 20px auto;
  padding: 30px 40px;
  box-sizing: border-box;
  border-radius: 20px;

  .title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;

    .play {
      border: 1px solid #eee;
      border-radius: 40px;
      font-size: 25px;
      padding: 5px 15px;
    }
  }

  .hot-list {
    margin-top: 30px;
    font-size: 35px;

    li {
      // height: 90px;
      // line-height: 90px;
      padding: 20px 0;
      display: flex;
      flex-wrap: nowrap;

      span {
        width: 60px;
        display: block;
        margin-right: 10px;
        color: @font-fu;
      }

      p {
        flex: 1;
        font-size: 32px;
        display: flex;
        align-items: center;
      }

      &.hot {
        font-weight: bold;

        span {
          color: #FE3A3B;
        }
      }

      .font-hot {
        margin-left:10px;
        background-color: #FFEBEC;
        color: #FE3A3B;
        font-size:26px;
        padding: 5px 10px;
      }
    }
  }
}
</style>